<template>

 	<view class="process">
 		<u-form v-model="process">
 			<u-row gutter="50">
 				<u-col span="12">
 					<view style="margin-top: 20rpx;">
 						 <view class="content-son" v-for="(item, ind) of process.samples" :key="ind" @click="contentSon(ind)">
 							<u-form-item label="样品名称" label-width="160" >
 								<u-input input-align="right"  v-model="item.sampleName" class="u-form-right" placeholder="请输入样品名称" placeholderStyle="color: #D9D9D9" />
 							</u-form-item>
 							<u-form-item label="样品部位规格型号" label-width="260">
 								<u-input input-align="right" v-model="item.sampleModel" placeholder="请输入样品部位规格型号" placeholderStyle="color: #D9D9D9"/>
 							</u-form-item>
 							<view class="mePhoto">取样照片</view>
 							<view class="u-demo">
 								<view class="u-demo-wrap">
 									<view class="u-demo-area">
 							      <u-upload ref="uUpload"  
 											:custom-btn="customBtn" :max-size="2 * 1024 * 1024"
 											:action="action"
 											 @on-success="onSuccess1"  @on-remove="onRemove1" @on-list-change="onListChange">
 											<view v-if="customBtn" slot="addBtn" class="slot-btn" hover-class="slot-btn__hover" hover-stay-time="150">
 												<u-icon name="photo" size="60"></u-icon>
 											</view>
 										</u-upload>
 									</view>
 								</view>
 							</view>
 							<u-button type="error" v-if="process.samples.length > 1" size="medium" @click="removeRow(ind)">删除</u-button>
 							<view class="line" v-if="process.samples.length > 1"></view>
 						</view>
 						
 						
						<view class="addBut">
 							<view class="but">
 								<u-button plain style="color: #007AFF;" @click="addRow">+新增样品</u-button>
 							</view>
 						</view>
						
						
 					</view>
 					
 			
 				

 					
 					
 				</u-col>
 			</u-row>
 		</u-form>	
 	
 	</view>
 

 </template>
 
 <script>
 // import aUpload from '../../components/a-upload/a-upload.vue'
 	export default {
 		name: 'acceptanceProcess',
 		// components: { aUpload },
 		data() {
 			return {
 				
 				// 页面数据
 				process: {
 					samples: [ // 样品信息
 						{
 							sampleModel: "", // 样品规格型号
 							sampleName: "", // 样品名称
 							sendImages: [], // 送样照片
 							takeImages: [], // 取样照片
 						}
 					]
 				},
 				action: 'https://project-supervision-api.sdhuan.cn/blade-resource/oss/endpoint/put-file',

 			
 				header: {},
 	
 				autoUpload: true, // 选择完图片是否自动上传
 				deletable: true,
 				lists: [],
 				lists1: [],
 				list2: [],
 			}
 		},
 		onLoad(e) {
 			
 		},
 		methods: {

 			
 			//新增表单
 			addRow() {
 				this.process.samples.push({
 					sampleModel: "", // 样品规格型号
 					sampleName: "", // 样品名称
 					sendImages: [], // 送样照片
 					takeImages: [] // 取样照片
 				})
 			},
 			// 删除表单
 			removeRow(index) {
 				console.log(index)
 				this.process.samples.splice(index, 1)
				this.$refs.uUpload.clear();
 				this.$forceUpdate() // 强制刷新组件
 			},
 			
 			// 上传照片
 			deleteItem(index) {
 				this.showModel.content = '是否删除该图片？'
 				this.showModel.state = true
 				this.showModel.indx = index
 			},
 			// 获取到新增列数的id
 			contentSon(ind) {
 				console.log(ind)
 				this.indStatus = ind
 			},
 			
 			// 上传图片返回数据1
 			onSuccess1(data) {
 				console.log('onSuccess1', data);
 			},
 			onRemove1(data, index, lists) {
 				console.log('onRemove1', data, index, lists);
 			},
 			
 			// 上传图片返回数据2
 			onListChange(data, index, lists) {
					console.log('onListChange', data, index, lists);
 			}
 		
 			
 	
 			
 			
 		

 			
 }
 	
 
 		
 	}
 </script>
 
 <style lang="scss" scoped>
 	.process {
 		.title {
 			background-color: #FFFFFF;
 			border-radius: 8rpx;
 			.tips {
 				margin: 25rpx 0 0;
 				font-size: 30rpx;
 				padding: 30rpx 40rpx;
 				border-bottom: 2rpx solid #f5f5f5;
 				span {
 					color: #3B85FE;
 				}
 			}
 			.tips-company {
 				padding: 0 30rpx;
 			}
 		}
 		
 		.content-son{
 			background: #FFFFFF;
 			padding: 0 30rpx;
 			border-radius: 10rpx;
 		}
 		.addBut {
 			background-color: #FFFFFF;
 			margin-bottom: 30rpx;
 			padding: 80rpx 0 30rpx;
 			.but {
 				width: 80%;
 				margin: 0 10%;
 			}
 			/deep/.u-btn--default {
 				color: #007AFF!important;
 			}
 		}
 		.content {
 			background: #FFFFFF;
 			padding: 0 30rpx;
 			border-radius: 10rpx;
 			margin-bottom: 20rpx;
 			h3 {
 				color: #262626;
 				font-size: 30rpx;
 				font-weight: 600;
 				padding-top: 20rpx;
 			}
 			.lineImg {
 				margin-top: -30rpx;
 				image {
 					width: 120rpx;
 					height: 9.5rpx;
 				}
 			}
 		}
 		.autograph {
 			width: 100%;
 			border: 2rpx solid #D9D9D9;
 			font-size: 24rpx;
 			color: #D9D9D9;
 			border-radius: 8rpx;
 			padding: 20rpx 30rpx;
 			.imgs{
 				width: 200rpx;
 				height: 100rpx;
 				display: flex;
 				margin: 0 auto;
 				flex-wrap: wrap;
 				.img{
 					 width: 100%;
 					 height: 100%;
 				}
 			}
 		}
 		.mePhoto {
 			margin: 40rpx 0 25rpx;
 		}	
 	}
 	.text {
 		/deep/.u-border-bottom:after {
 			border-bottom-width: 0!important
 		}
 		
 	}
   .butList {
 			margin: 20rpx 0 40rpx;
 			.btn1 {
 				/deep/.u-btn--default {
 					border-color: #3B85FE!important;
 					color: #3B85FE!important;
 					margin: 50rpx 0 80rpx;
 				}
 			
 			}
 			.but2 {
 				/deep/.u-btn--primary{
 					background:linear-gradient(to right ,#3B85FE, #3BC0FE)!important;
 					margin: 50rpx 0 80rpx;
 				}
 			}
 		}
 		
 		
 		
 // 上传照片css
 		.u-demo {
 			padding-bottom: 30rpx;
 		}
 		/deep/.u-list-item {
 			margin: 8rpx!important;
 		}
 		.u-demo-wrap {
 			background-color: #FFFFFF;
 			padding: -10rpx 8rpx 20rpx;
 			margin-left: -14rpx;
 			margin-right: -14rpx;
 		}
 		
 		.u-add-wrap {
 			flex-direction: column;
 			color: $u-content-color;
 			font-size: 28rpx;
 		}
 		
 		/deep/ .slot-btn {
 			width: 329rpx;
 			height: 140rpx;
 			display: flex;
 			justify-content: center;
 			align-items: center;
 			background: rgb(244, 245, 246);
 			border-radius: 10rpx;
 		}
 		 
 		.slot-btn__hover {
 			background-color: rgb(235, 236, 238);
 		}
 		 
 		.pre-box {
 			display: flex;
 			align-items: center;
 			justify-content: space-between;
 			flex-wrap: wrap;
 		}
 		 
 		.pre-item {
 			flex: 0 0 48.5%;
 			border-radius: 10rpx;
 			height: 140rpx;
 			overflow: hidden;
 			position: relative;
 			margin-bottom: 20rpx;
 		}
 		 
 		.u-progress {
 			position: absolute;
 			bottom: 10rpx;
 			left: 8rpx;
 			right: 8rpx;
 			z-index: 9;
 			width: auto;
 		}
 		 
 		.pre-item-image {
 			width: 100%;
 			height: 140rpx;
 		}
 		 
 		.u-delete-icon {
 			position: absolute;
 			top: 10rpx;
 			right: 10rpx;
 			z-index: 10;
 			background-color: $u-type-error;
 			border-radius: 100rpx;
 			width: 44rpx;
 			height: 44rpx;
 			display: flex;
 			align-items: center;
 			justify-content: center;
 		}
 	
 		.line {
 			margin: 80rpx 0 0;
 			width: 100%;
 			height: 2rpx;
 			background: #999999;
 		}
 </style>